import React from 'react';
import XDate from 'xdate';
import './flowTotal.scss';
import { ShopApi } from 'js/api/shop';
import { Icon } from 'antd-mobile';
const FlowTotal = React.createClass({
    getInitialState() {
        return {
            data: null
        }
    },
    componentDidMount() {
        let query = {
            ShopId: this.props.shopId,
            Date: new XDate().toString('yyyy-MM-dd'),
            CurrDate: new XDate().toString('yyyy-MM-dd'),
            AreaTypeId: this.props.AreaTypeId,
            flowDataType: this.props.flowDataType,
            AreaId: this.props.AreaId,
            IndustryId: this.props.AreaId
        }
        ShopApi.getSummary(query, (data) => {

            this.setState({ data: data[0] })
        })
    },
    render() {
        let node;
        if (this.state.data) {
            node = <div className="content" key={1}>
                <div className="flex ">
                    <div className="flex-col-center flex-g-1 item">
                        <div className="number">{this.state.data.TODAY}</div>
                        <div className="text">本日客流(人次)</div>
                    </div>
                    <div className="flex-col-center flex-g-1 left-border item">
                        <div className="number">{this.state.data.THISWEEK}</div>
                        <div className="text">本周客流(人次)</div>
                    </div>
                </div>
                <div className="flex-col-center top-border item">
                    <div className="number">{this.state.data.THISMONTH}</div>
                    <div className="text">本月客流(人次)</div>
                </div>
            </div>
        } else {
            node = <div className="content flex-center" key={2}>
                <Icon type="loading" size={'md'} />
            </div>
        }
        return (
            <div id="flowTotal" className="flex">
                {node}
            </div>
        );
    }
})

module.exports = FlowTotal;